<template>
  <div class="pay-success">
    <header>
      <img src="../../assets/images/pay-success.png"/>
      <div class="up">
        <div class="title">受理成功</div>
        <div class="dsc">支付金额￥{{price}}</div>
      </div>
      <div class="down">
        <div class="title">订单处理中</div>
        <div class="dsc">预计2分钟内到帐</div>
      </div>
    </header>
    <section>
      <div class="bt-list">
        <router-link tag="a" :to="{ name: 'home' }">返回</router-link>
        <router-link tag="a" :to="{ name: 'rechargeDetails', query: { orderNo:orderNo, tag: 1 }}">查看详情</router-link>
      </div>
      <div class="insurance" v-for="item in insurance" @click="postMessage(item.linkUrl)">
        <div class="left"><img :src="item.icon"/>
          <div>
            <p>{{item.title}}</p>
            <p class="insurance-detail" v-if="item.detail">{{item.detail}}</p>
          </div>
        </div>

        <img v-if="!item.button" src="../../assets/images/right-row.png" class="insurance-rightrow" />
        <div v-else class="right">{{item.button}}</div>
      </div>
      <swiper v-if="bannerList.length > 0" class="advertising" :list="bannerList"/>
    </section>
  </div>
</template>
<!--支付成功的回调-->
<script>
  import Swiper from '@/components/swiper'

  export default {
    name: 'PaySuccess',

    props: {},

    components: {
      Swiper
    },

    data () {
      return {
        // banner 数组
        bannerList: [],
        // 保险
        insurance: [],
        // 订单id
        orderNo: '',
        // 金额
        price: ''
      }
    },

    mounted () {
      let { orderNo, price } = this.$route.query;
      this.orderNo = orderNo;
      this.price = price;
      this.init();
      window['nativeBack'] = () => {
        if (this.$route.name === 'paySuccess') {
          closeWebview()
          return true
        }
      }
    },

    methods: {
      // 获取广告信息
      init () {
        this.$http.get('/api/adertInfo').then(res => {
          console.log(res)
          if (res.status === 200) {
            let { more, advert } = res.data
            this.insurance = more
            this.bannerList.push(advert)
          }
        })
      },

      // 购买保险
      postMessage (url) {
        if (url) {
          postMessage({
            'androidUrl': url,
            'iosUrl': url,
            'wxappUrl': url
          });
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../assets/scss/extends";

  .pay-success {
    overflow: hidden;

    header {
      margin-top: 5px;
      padding: 5px 59px 0 74px;
      position: relative;

      img {
        width: 38px;
        height: 100px;
        position: absolute;
        left: 16px;
        top: 0;
      }

      .up, .down {
        .title {
          font-size: 16px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(70, 81, 102, 1);
          line-height: 22px;
          margin-bottom: 4px;
        }

        .dsc {
          font-size: 14px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(165, 170, 179, 1);
          line-height: 20px;
        }
      }

      .up {
        margin-bottom: 34px;

        .title {
          font-size: 18px;
        }
      }
    }

    section {
      margin-top: 40px;
      padding-left: 16px;

      .bt-list {
        padding: 0 40px 20px 24px;
        @extend %flex-justify-between;

        a {
          padding: 8px 32px;
          border-radius: 8px;
          font-size: 17px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          line-height: 24px;
        }

        a:last-child {
          color: white;
          background:rgba(74,129,238,1);
        }

        a:first-child {
          color: #4A81EE;
          border:1px solid rgba(74,129,238,1);
        }
      }

      .insurance {
        @extend %flex-justify-between;
        padding: 14px 16px 12px 0;
        border-bottom: 1px solid #EEEFF0;
        align-items: center;

        &-rightrow {
          height: 20px;
          width: 20px;
        }

        &-detail {
          font-size: 12px;
          margin-top: 4px;
          color: #A7AEBC;
        }

        .left {
          @extend %flex;
          flex-direction: row;
          align-items: center;

          img {
            width: 20px;
            height: 20px;
            margin-right: 8px;
          }


          font-size: 14px;
          font-family: PingFangSC-Regular;
          font-weight: 400;
          color: rgba(70, 81, 102, 1);
          line-height: 20px;
        }

        .right {
          font-size: 12px;
          font-family: PingFangSC-Medium;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: normal;
          height: 21px;
          width: 64px;
          text-align: center;
          line-height: 21px;
          background: #4A81EE;
          border-radius: 4px;
        }
      }

      .advertising {
        margin: 20px 16px 0 0;
        height: 80px;
        border-radius: 8px;
      }
    }
  }
</style>
